EDITABLE HTML

Editable HTML provides a way to make divs of your HTML content editable. The behavior of Editable HTML is very similar to the contentEditable = true feature supported by most browsers. Editable HTML wil create a textareas inside your divs and the textarea value will get the divs innerHTML. By that you can also modify the html inside a div.

The user interface of Editable HTML is either be based on mouse clicks and keyboard events of based on buttons. Let's go through the different options.

Editable div via mouse click and keyboard event

Below are two divs with a border. Each div can be edited by clicking inside the divs area. The first div is implemented using the build-in browser/html feature contentEditable. The second div is implemented using Editable HTML of this project. Try it and experience the different behavior

Notice the different behavior of the two divs

(1) In EditableHTML you have to press 'Ctrl' key and click inside the div to make it editable. This shall avoid unintentional changes to edit mode.

(2) Editable HTML will set the divs innerHTML back to its original value, when click outside the div to avoid unintential changes. The buld-in feature will save your input and the original value gets lost.

(3) In this example, Editable HTML will only save your input when you press 'Ctrl + Enter' or 'Ctrl + Blankspace'. Each input must be confirmed by a dedicated user action, that makes it unlikey to happen by mistake.

I your html you need to add the class js-edit to the div you want to be editable. The class js-event is also needed as this element will get eventlisteners.

In your script section, you need to call the function editableHTML_Init() and pass the id of the node div container that has the editable divs. In this first example, there is only one editable div inside the node container.

Here's the example with three multiple editable divs inside the node container, containing the class js-edit and js-event

Multi Editable divs via mouse click and keyboard event

In this variant, the three text divs are connected. They form one logical edit unit, which are saved or discarded together. The editable divs need to be children of js-edit and have the class js-edit-child. Note that clicking outside the textare here will not undo your edit. Here we have to use the keyboard event 'esc' to discard the changes.

Editable div with buttons

In this example the user interface is based on buttons. Mouse clicks on the editable div and keyboard events are disabled here. The class js-event therefore has to move from the editiable div to the buttons. There a three buttons, edit, save and discard. The buttons can be located anywhere on the html as children of a div with class js-edit-btn. The link between the js-edit and js-edit-btn element is done via data-editable-link attribute which must be the same value.

To minimize html code, the buttons edit and save are by befault identified as the first and second child of the js-edit-btn element. When js-edit-btn has a third child, like in this exmaple, then the third child is identified as discard button. The discard button also can a separate element anywhere on the page. In yout html you have to set the class hidden to the save and discard button.

In this example the discard button is a seperate element. To link the discard button with its corresponding editable div, and button container the data data-editable-link with the same value must be added.

So either the class js-edit-btn has a third child, which is the discard button, or the data-value pair of data-editable-link occurs three times on the page (for a particular value), where only one has also the class js-event, which is the discard button.

05 discard button seperated with multiple divs

Same logic as above. You can have multiple editable divs can be placed inside a node container. The button actions applay to all divs inside the node

Example 6: table

....